import ProfileForm from "./profile-form";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import ContentSection from "../components/content-section";
import { useSelector } from "react-redux";
import { RootStateI, UserI } from "@/types";

export default function SettingsProfile() {
  const user: UserI = useSelector((state: RootStateI) => state.user);

  return (
    <div className="p-6">
      <ContentSection title="个人信息" desc="">
        <div>
          <Card className="my-6">
            <CardContent>
              <p className="py-2">用户名： {user.username}</p>
              <p className="py-2">工号： {user.empCode}</p>
              <p className="py-2">姓名： {user.fullName}</p>
              <p className="py-2">
                授权科室：{" "}
                {user.depts
                  ? JSON.parse(user.depts)
                      .map((item: any) => item.value)
                      .join(", ")
                  : ""}
              </p>
            </CardContent>
          </Card>
          <ProfileForm />
        </div>
      </ContentSection>
    </div>
  );
}
